<template>
  <footer class="app-footer">
    <div class="footer-container">
      <!-- Left Section -->
      <div class="footer-left">
        <div class="footer-logo">
          <NearLogo :size="24" variant="primary" />
          <span>{{ $t('header.logo') }}</span>
        </div>
        <p class="footer-copyright">{{ $t('footer.copyright') }}</p>
        <div class="footer-links">
          <a href="#" class="footer-link">{{ $t('footer.terms') }}</a>
          <span class="separator">|</span>
          <a href="https://app.mynearwallet.com/20220707-terms-and-conditions.9f8fa10c.pdf" target="_blank" class="footer-link">{{ $t('footer.privacy') }}</a>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import NearLogo from '@/components/Common/NearLogo.vue'
</script>

<style scoped lang="scss">
.app-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 40px 0;

  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }

  .footer-left {
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 16px;

    }

    .footer-copyright {
      color: #718096;
      font-size: 14px;
      margin-bottom: 12px;
      line-height: 1.5;
    }

    .footer-links {
      display: flex;
      align-items: center;
      gap: 8px;

      .footer-link {
        color: #4f46e5;
        text-decoration: none;
        font-size: 14px;

        &:hover {
          text-decoration: underline;
        }
      }

      .separator {
        color: #cbd5e0;
      }
    }
  }
}

@media (max-width: 1024px) {
  .app-footer {
    .footer-container {
      grid-template-columns: 1fr;
      gap: 32px;
      text-align: center;
    }

    .footer-left {
      text-align: center;
    }
  }
}

@media (max-width: 768px) {
  .app-footer {
    padding: 32px 0;

    .footer-container {
      padding: 0 16px;
      gap: 24px;
    }

    .footer-links {
      justify-content: center;
    }
  }
}
</style>
